<template>
	<view class="index-container">
		<view class="nav-tabs flex align-center">
			<view class="tab-item active">
				精选
			</view>
		</view>
		<view class="swiper-container">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#ffffff"
				indicator-active-color="#f69316" circular>
				<swiper-item v-for="item in 4" :key="item">
					<view class="swiper-item">
						<image src="../../static/logo.png" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="category-container flex align-center">
			<view @click="$refs['last-view'].open()" class="flex-1 flex align-center justify-center">
				<view class="cate-item">
					<image src="../../static/logo.png" mode="aspectFill"></image>
					<view class="">
						排行
					</view>
				</view>
			</view>
			<view @click="$refs['pay-confirm'].open()" class="flex-1 flex align-center justify-center">
				<view class="cate-item">
					<image src="../../static/logo.png" mode="aspectFill"></image>
					<view class="">
						最新
					</view>
				</view>
			</view>
		</view>
		<view class="grid-container">
			<view @click="goDetail" class="grid-item" v-for="item in 12" :key="item">
				<image src="../../static/logo.png" mode="aspectFill"></image>
				<view class="item-title">
					祖师奶奶三岁半
				</view>
			</view>
		</view>

		<last-view ref="last-view"></last-view>
		<pay-confirm ref="pay-confirm"></pay-confirm>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
			goDetail(){
				uni.navigateTo({
					url:"/pages/video_list/video_list"
				})
			}
		}
	}
</script>

<style lang="scss">
	.index-container {
		padding: 0rpx 24rpx;

		.tab-item {
			font-size: 28rpx;
			color: #333333;

			&.active {
				color: #f69316;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					left: 0;
					bottom: -10rpx;
					width: 100%;
					height: 5rpx;
					background: #f69316;
				}
			}
		}

		.swiper-container {
			margin-top: 32rpx;
			width: 702rpx;
			height: 300rpx;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				width: 702rpx;
				height: 300rpx;
			}
		}

		.category-container {
			margin: 24rpx 0rpx;

			.cate-item {
				font-size: 28rpx;
				color: #666666;

				image {
					width: 58rpx;
					height: 58rpx;
				}
			}
		}

		.grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-row-gap: 24rpx;
			grid-column-gap: 24rpx;

			.grid-item {
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0rpx 4rpx 8rpx #dedede;

				image {
					width: 339rpx;
					height: 508rpx;
				}

				.item-title {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					padding: 0rpx 10rpx;
					line-height: 60rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>